﻿<!DOCTYPE HTML>
<html>
<head>
    <title>我们的2023</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" href="/image/h.ico" type="image/x-icon" />
    <style type='text/css'>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #000;
            overflow: hidden;
        }

        #perspective {
            perspective: 800px;
        }

        #wrap {
            width: 120px; /*133:200  4:6  */
            height: 200px;
            margin: 0 auto;
            position: relative;
            /*搭建3D效果必须的两个属性：一个变换风格变3d，一个场景景深800px*/
            transform-style: preserve-3d;
            transform: rotateX(-10deg) rotateY(0deg);
        }

            #wrap .divImg {
                width: 100%;
                height: 100%;
                position: absolute;
                transform: rotateY(0deg) translateZ(0px);
                /*倒影：朝向 偏移 遮盖*/ /*线性渐变(从哪里开始,开始时候的颜色,结束时候的颜色)*/
                -webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);
            }

                #wrap .divImg img {
                    width: 100%;
                    height: 180px;
                    border-radius: 1px;
                }

                #wrap .divImg label {
                    display: block;
                    text-align: center;
                    width: 100%;
                    color: aquamarine;
                    margin: auto;
                }

            #wrap p {
                width: 1200px;
                height: 1200px;
                background: -webkit-radial-gradient(center center,600px 600px,rgba(244,23,234,0.2),rgba(0,0,0,0));
                border-radius: 100%;
                position: absolute;
                left: 50%;
                top: 102%;
                margin-left: -600px;
                margin-top: -600px;
                transform: rotateX(90deg);
            }

        .divtitle {
            color: #f70a0a;
            width: 100%;
            text-align: center;
            font-size: 34px;
        }
    </style>
</head>
<body>
    <div style="width:100%">
        <audio style="width:100%" controls autoplay loop>
            <source src="audio/xqg.mp3" type="audio/mpeg">
            <source src="audio/lovegirl.flac">
            <source src="audio/lemontree.flac">
        </audio>
    </div>

    <!--<audio src="audio/xqg.mp3" autoplay>
    </audio>-->
    <div class="divtitle">Our 2023</div>
    <div id="perspective">
        <div id='wrap'>
            <!--<div class="divImg">
                <label>January</label>
                <img src="image/1.png" />
            </div>
            <div class="divImg">
                <img src="image/2.png" />
            </div>
            <div class="divImg">
                <img src="image/3.png" />
            </div>
            <div class="divImg">
                <img src="image/4.png" />
            </div>
            <div class="divImg">
                <img src="image/5.png" />
            </div>
            <div class="divImg">
                <img src="image/6.png" />
            </div>-->


            <p></p>
        </div>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            var oWrap = document.getElementById('wrap');
            for (var i = 0; i < 17; i++) {
                oWrap.innerHTML += '<div class="divImg"><img src="image/our/' + i + '.jpg" /></div >';
            }
            //oWrap.append('');

            var oImg = oWrap.getElementsByClassName('divImg');
            var oImgLength = oImg.length;
            var Deg = 360 / oImgLength;
            var nowX, nowY, lastX, lastY, minusX = 0, minusY = 0;
            var roY = 0, roX = -10;
            var timer;

            for (var i = 0; i < oImgLength; i++) {
                oImg[i].style.transform = 'rotateY(' + i * Deg + 'deg) translateZ(350px)';
                oImg[i].style.transition = 'transform 1s ' + (oImgLength - 1 - i) * 0.1 + 's';

            }

            mTop();

            var audio = document.getElementsByTagName('audio');
            if (audio && audio.length > 0) {
                audio = audio[0];
                audio.play();
            }
            window.onresize = mTop;

            function mTop() {
                var wH = document.documentElement.clientHeight;
                oWrap.style.marginTop = wH / 2 - 180 + 'px';
            }

            var ishandle = false;
            /*绑定touchstart*/
            document.addEventListener('touchstart', function (ev) {

                if (audio.paused) {
                    audio.play();
                }
                ishandle = true;
                ev = ev.touches[0] || window.event;

                //鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
                lastX = ev.clientX;
                lastY = ev.clientY;
                clearInterval(interval);
                //移动
                document.addEventListener('touchmove', function (ev) {
                    ev = ev.touches[0] || window.event;
                    ishandle = true;
                    clearInterval(timer);
                    clearInterval(interval);

                    nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
                    nowY = ev.clientY; // clientY ………………………………顶部………………

                    //当前坐标和前一点坐标差值
                    minusX = nowX - lastX;
                    minusY = nowY - lastY;

                    //更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
                    roY += minusX * 0.2; // roY = roY + minusX*0.2;
                    roX -= minusY * 0.1;

                    oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';

                    /*
                    //生成div，让div跟着鼠标动
                    var oDiv = document.createElement('div');
                    oDiv.style.cssText = 'width:5px;height:5px;background:red;position:fixed;left:'+nowX+'px;top:'+nowY+'px';
                    this.body.appendChild(oDiv);
                    */

                    //前一点的坐标
                    lastX = nowX;
                    lastY = nowY;

                })

                //抬起
                document.addEventListener('touchmove', function (ev) {
                    this.onmousemove = null;
                    timer = setInterval(function () {
                        minusX *= 0.95;
                        minusY *= 0.95;
                        roY += minusX * 0.2; // roY = roY + minusX*0.2;
                        roX -= minusY * 0.1;
                        oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';

                        if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) {
                            clearInterval(timer);
                            ishandle = false;
                            autoPlay();
                        }
                        console.log(minusX);
                    }, 13);

                });

                return false;

            });



            // 拖拽：三个事件-按下 移动 抬起
            //按下
            document.onmousedown = function (ev) {
                ev = ev || window.event;

                //鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
                lastX = ev.clientX;
                lastY = ev.clientY;
                clearInterval(interval);
                ishandle = true;
                //移动
                this.onmousemove = function (ev) {
                    ev = ev || window.event;
                    ishandle = true;
                    clearInterval(timer);

                    nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
                    nowY = ev.clientY; // clientY ………………………………顶部………………

                    //当前坐标和前一点坐标差值
                    minusX = nowX - lastX;
                    minusY = nowY - lastY;

                    //更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
                    roY += minusX * 0.2; // roY = roY + minusX*0.2;
                    roX -= minusY * 0.1;

                    oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';

                    /*
                    //生成div，让div跟着鼠标动
                    var oDiv = document.createElement('div');
                    oDiv.style.cssText = 'width:5px;height:5px;background:red;position:fixed;left:'+nowX+'px;top:'+nowY+'px';
                    this.body.appendChild(oDiv);
                    */

                    //前一点的坐标
                    lastX = nowX;
                    lastY = nowY;

                }
                //抬起
                this.onmouseup = function () {
                    this.onmousemove = null;
                    timer = setInterval(function () {
                        minusX *= 0.95;
                        minusY *= 0.95;
                        roY += minusX * 0.2; // roY = roY + minusX*0.2;
                        roX -= minusY * 0.1;
                        oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';

                        if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) {
                            clearInterval(timer);
                            ishandle = false;
                            autoPlay();
                        }
                        console.log(minusX);
                    }, 13);

                }
                return false;
            }
            autoPlay(true);
            var interval;
            var bX = 0;
            function autoPlay(isFirst) {
                //if (!ishandle) {
                //    if (!isFirst) {
                //        setTimeout(function () {
                //            play();
                //        }, 5000);
                //    } else {
                //        play();
                //    }
                //}

            }

            function play() {
                bX = 0;
                if (interval) {
                    clearInterval(interval);
                }
                //if (!interval) {
                    interval = setInterval(function () {
                        //minusX *= 0.95;
                        //minusY *= 0.95;
                        //roY += minusX * 0.2; // roY = roY + minusX*0.2;
                        //roX -= minusY * 0.1;
                        bX -= 0.2;
                        oWrap.style.transform = 'rotateY(' + bX + 'deg)';
                    }, 100);
            /*    }*/
            }

        }




    </script>
</body>
</html>